<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
    <div>
        <div class="container" v-cloak>
            <p v-show="finishedStage.length>0" >
                已完成的步骤（{{finishedStage.length}}）
            </p>
            <ul  class="list-group">
                <li class="list-group-item" v-for="step in finishedStage" :key="step">
                    <span style="text-decoration: line-through; opacity: 50%">Step{{step.id}}-{{step.text}}</span>
                </li>
            </ul>
        </div>
        <br />
        <div class="container" v-cloak >
            <p v-show="remainStage.length>0" >
                未完成的步骤（{{remainStage.length}}）
            </p>
            <ul class="list-group">
                <li class="list-group-item" v-for="step in remainStage" :key="step">
                    Step{{step.id}}: {{step.text}}
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    import { mapState, mapActions, mapMutations } from "vuex";
    export default{
        computed: mapState("task_detail", {
            remainStage : state => state.remain_stage,
            finishedStage: state => state.finished_stage

        }),
        /*watch:{
          remainStage:function (newVal,oldVal) {
              alert("stage的值发生了变化")

          }
        }*/
    }

</script>
<style>
    .finished{
        text-decoration: line-through;

    }

</style>